<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="less/level.css" />
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<body>
		<div class="wrap">
			<div class="headBox">
				<img src="img/classification_icon_back.png" class="back_icon">
				<span class="level_title">等级勋章</span>
				<img src="img/nav%20bar_icon_share.png" class="share_icon">
			</div>
			<div class="contentBox">
				<div class="head">
					<img src="" class="head_img">
					<span class="name"></span>
					<img src="" class="level_img">
				</div>
				<div class="content">
					<div class="titleBox">
						<h3>我的等级</h3>
					</div>
					<div class="level_xinxi">
						<p class="level_name">小萌新</p>
						<p class="jifen">已获积分值：10</p>
						<p class="day">已签到天数：4</p>
						<p class="beyond">超过15%的小伙伴</p>
					</div>
					<div class="gradeBox">
						<div class="grade">
							<div class="jindu"></div>
							<span class="circle_active"></span>
							<span class="circle"></span>
							<span class="circle"></span>
							<span class="circle"></span>

						</div>
						<div class="level">
							<span class="level_start">Lv0</span>
							<span class="level_end">Lv1</span>
						</div>
					</div>
				</div>
				<div class="quanyiBox">
					<div class="head">
						<div class="left">
							<span class="line"></span>
							<span class="title_text">等级权益</span>
						</div>
					</div>
					<ul class="quanyiUl">
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_birthday%20dress_pre.png" class="img_icon">
							<p>生日装扮</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_integral%20doubling_pre.png" class="img_icon">
							<p>积分提现</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_integral%20doubling_nor.png" class="img_icon">
							<p>积分翻倍</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_priority%20recommendation_nor.png" class="img_icon">
							<p>优先推荐</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_open%20circles_nor.png" class="img_icon">
							<p>开设圈子</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_reward%20function_nor.png" class="img_icon">
							<p>打赏功能</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_paid%20reading_nor.png" class="img_icon">
							<p>付费阅读</p>
						</li>
						<li class="quanyiLi">
							<img src="img/hierarchical%20equity_icon_platform%20reward_nor.png" class="img_icon">
							<p>平台奖励</p>
						</li>
					</ul>
				</div>
				<div class="howBox">
					<div class="head">
						<div class="left">
							<span class="line"></span>
							<span class="title_text">如何快速提升等级</span>
						</div>
					</div>
					<div class="textBox">
						<p>发布图片质量及数量决定等级高低，通过每日签到及发布高质量图片，可以积累一定数量的积分值，积分值达到指定数额，即可实现升级</p>
						<button type="button">去完成签到任务</button>
					</div>
				</div>
				<div class="whyBox">
					<div class="head">
						<div class="left">
							<span class="line"></span>
							<span class="title_text">如何快速提升等级</span>
						</div>
					</div>
					<div class="textBox">
						<p>等级是积累高质量内容获得积分值达到的级别，通过提升等级可以加大平台曝光率，获得优先推荐及签约机会；每位用户最高可到达的等级为4级，能获得的最高荣誉称号为“艺术家”</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var levelList = {
			head_img: 'img/hierarchical%20equity_photo_head%20portrait.png',
			name: '小陈的旅拍故事',
			level: 0,
			jifen: 5,
			day: 2,
			beyond: 15
		}

		var quanyiImg = {
			Lv0: [
				{
						img: 'img/hierarchical%20equity_icon_birthday%20dress_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_integral%20doubling_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_priority%20recommendation_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_open%20circles_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_reward%20function_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_paid%20reading_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_platform%20reward_nor.png'
					},
			],
			Lv1: [
				{
						img: 'img/hierarchical%20equity_icon_birthday%20dress_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_priority%20recommendation_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_open%20circles_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_reward%20function_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_paid%20reading_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_platform%20reward_nor.png'
					},
			],
			Lv2: [
				{
						img: 'img/hierarchical%20equity_icon_birthday%20dress_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_priority%20recommendation_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_open%20circles_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_reward%20function_pre.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_paid%20reading_nor.png'
					},
					{
						img: 'img/hierarchical%20equity_icon_platform%20reward_nor.png'
					},
			],
			Lv3: [{
					img: 'img/hierarchical%20equity_icon_birthday%20dress_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_integral%20doubling_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_priority%20recommendation_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_open%20circles_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_reward%20function_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_paid%20reading_pre.png'
				},
				{
					img: 'img/hierarchical%20equity_icon_platform%20reward_pre.png'
				},
			]
		}



		window.onload = function() {
			shengcheng()
		}

		function shengcheng() {
			$('.head_img').attr('src', levelList.head_img)
			$('.name').html(levelList.name)
			if (levelList.level == 0) {
				$('.level_img').attr('src', 'img/photo_medal%201.png')
				$('.level_name').html('小萌新')
				$('.content').css('background-image', 'url(img/current%20level_photo_level%20background%201.png)')
				$('.level_start').html('Lv0')
				$('.level_end').html('Lv1')
				$('.img_icon').eq(0).attr('src', 'img/hierarchical%20equity_icon_birthday%20dress_pre.png')
				$('.img_icon').eq(1).attr('src', 'img/hierarchical%20equity_icon_integral%20doubling_pre.png')
				var imgLisr = quanyiImg.Lv0
				for (var i = 0; i < imgLisr.length; i++) {
					$('.img_icon').eq(i).attr('src', imgLisr[i].img)
				}
			} else if (levelList.level == 1) {
				$('.level_img').attr('src', 'img/photo_medal%202.png')
				$('.level_name').html('发烧友')
				$('.content').css('background-image', 'url(img/2.png)')
				$('.level_start').html('Lv1')
				$('.level_end').html('Lv2')
				$('.img_icon').eq(0).attr('src', 'img/hierarchical%20equity_icon_birthday%20dress_pre.png')
				$('.img_icon').eq(1).attr('src', 'img/hierarchical%20equity_icon_integral%20doubling_pre.png')
				$('.img_icon').eq(2).attr('src', 'img/hierarchical%20equity_icon_integral%20doubling_pre.png')
				$('.img_icon').eq(3).attr('src', 'img/hierarchical%20equity_icon_priority%20recommendation_pre.png')
				var imgLisr = quanyiImg.Lv1
				for (var i = 0; i < imgLisr.length; i++) {
					$('.img_icon').eq(i).attr('src', imgLisr[i].img)
				}
			} else if (levelList.level == 2) {
				$('.level_img').attr('src', 'img/photo_medal%203.png')
				$('.level_name').html('超能者')
				$('.content').css('background-image', 'url(img/3.png)')
				$('.level_start').html('Lv2')
				$('.level_end').html('Lv3')
				var imgLisr = quanyiImg.Lv2
				for (var i = 0; i < imgLisr.length; i++) {
					$('.img_icon').eq(i).attr('src', imgLisr[i].img)
				}
			} else if (levelList.level == 3) {
				$('.level_img').attr('src', 'img/photo_medal%204.png')
				$('.level_name').html('艺术家')
				$('.content').css('background-image', 'url(img/4.png)')
				$('.level_start').html('Lv3')
				$('.level_end').html('Lv4')
				var imgLisr = quanyiImg.Lv3
				for (var i = 0; i < imgLisr.length; i++) {
					$('.img_icon').eq(i).attr('src', imgLisr[i].img)
				}

			}
			$('.jifen').html("已获积分值：" + levelList.jifen)
			$('.day').html("已签到天数：" + levelList.day)
			$('.beyond').html("超过：" + levelList.beyond + "%的小伙伴")



		}

		function fn(present) {
			if (present >= 3 && present < 6) {
				$('.circle').eq(0).addClass('circle_active')
			}
			if (present >= 6 && present < 9) {
				$('.circle').eq(0).addClass('circle_active')
				$('.circle').eq(1).addClass('circle_active')
			}
			if (present == 9) {
				$('.circle').eq(0).addClass('circle_active')
				$('.circle').eq(1).addClass('circle_active')
				$('.circle').eq(2).addClass('circle_active')
			}
		}

		if (levelList.day > 9 && levelList.day <= 18) {
			levelList.level = 1
			let jinduWidth = ((levelList.day - 9) / 9) * 100 + '%'
			let present = levelList.day - 9
			$('.jindu').css('width', jinduWidth)
			shengcheng()
			fn(present)
		} else if (levelList.day > 18 && levelList.day <= 27) {
			let jinduWidth = ((levelList.day - 18) / 9) * 100 + '%'
			levelList.level = 2
			let present = levelList.day - 18
			$('.jindu').css('width', jinduWidth)
			shengcheng()
			fn(present)
		} else if (levelList.day > 27) {
			levelList.level = 3
			let present = levelList.day - 27
			if (((levelList.day - 27) / 9) > 1) {
				let jinduWidth = '100%'
				$('.jindu').css('width', jinduWidth)
				$('.circle').addClass('circle_active')
			} else {
				let jinduWidth = ((levelList.day - 27) / 9) * 100 + '%'
				$('.jindu').css('width', jinduWidth)
				fn(present)
			}
			shengcheng()

		} else {
			let jinduWidth = (levelList.day / 9) * 100 + '%'
			$('.jindu').css('width', jinduWidth)
			let present = levelList.day
			fn(present)
		}
	
		$('.back_icon').click(function(){
			window.location.href='./bottomNav/bottomNav.html#/wode'
		})
	</script>
</html>
